<!-- 
	自定义导航栏
	<NavigationBar title="标题"></NavigationBar>
	import NavigationBar from "@/components/NavigationBar/index.vue";
-->
<template>
	<view class="navigation-space" :style="[{'height': statusBarHeight + navBarHeight + 'px'}]">
		<view class="navigation"
			:style="[{'background-color': props.backgroundColor, 'position': props.position, 'padding-top': statusBarHeight + 'px'}]">
			<!-- 导航栏 -->
			<view class="nav-content" :style="{'height': navBarHeight + 'px'}">
				<!-- 左侧操作 -->
				<view class="nav-left">
					<slot name="left"></slot>
				</view>
				<!-- 中心标题 -->
				<view class="nav-title" :style="[{'line-height': navBarHeight + 'px', 'color': titleColor}]">
					{{props.title}}
				</view>
				<!-- 右侧操作 -->
				<view class="nav-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		// 导航标题
		title: String,

		// 导航标题颜色
		titleColor: {
			type: String,
			default: 'black'
		},

		// 导航栏背景色
		backgroundColor: {
			type: String,
			default: 'white'
		},

		// 定位方式
		position: {
			type: String,
			default: 'fixed'
		},
	});

	const globalData: any = getApp().globalData;
	const statusBarHeight : number = globalData.statusBarHeight;
	const navBarHeight : number = globalData.navBarHeight;
</script>

<style lang="scss" scoped>
	.navigation {
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;

		.nav-content {
			position: relative;
		}

		.nav-left {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
		}

		.nav-title {
			width: 100%;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			letter-spacing: 4rpx;
		}

		.nav-right {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
		}
	}
</style>